<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 500px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">	
			<canvas id="canvasone" width="500" height="500"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');
			
//			document.onmousemove=function(e){
//				ppen.moveTo(e.pageX-oneCanvas.offsetLeft,e.pageY-oneCanvas.offsetTop);
//				ppen.lineTo(e.pageX-oneCanvas.offsetLeft,e.pageY-oneCanvas.offsetTop);
//				ppen.stroke();
//			}

//			document.onmousemove=function(e){
//				
//				ppen.moveTo(e.pageX-oneCanvas.offsetLeft,e.pageY-oneCanvas.offsetTop);
//				ppen.lineTo(e.pageX-oneCanvas.offsetLeft,e.pageY-oneCanvas.offsetTop);
//				console.dir('x='+ (e.pageX-oneCanvas.offsetLeft));
//				console.dir('y='+ (e.pageY-oneCanvas.offsetTop));
//				
//			}
			var  x,y;
			var flag=false;
			document.onmousedown=function(e){
				flag=true;
				x=e.pageX-oneCanvas.offsetLeft;
				y=e.pageY-oneCanvas.offsetTop;
				ppen.moveTo(x,y);					
   				document.onmousemove=function(e){
   					if(flag==true){
   						x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					ppen.lineTo(x,y);
					ppen.stroke();
   					}
   				}
   				
   				
   				document.onmouseup=function(e){
						flag=false;
					}
			}
			
			
			

			
		 }	
	</script>
</html>
